{% extends "uc/uc-base.html" %}
{% block content %}
    <div class="main-wrap" style="padding-bottom: 400px;">
        <div class="wrapper">
            <div class="center-box ">

                <div class="box-hd box-hd-tabs">
                    <a href="javascript:;" class="item">パスワード変更</a>
                    {#                    <a href="javascript:;" class="item">通过邮箱找回密码</a>#}
                </div>
                <div class="tab-con">
                    <form>
                        <label class="txtin-box">
                            <input class="txtin" type="mail" name="mail" id="mail" placeholder="登録E-mailを入力"/>
                        </label>
                        <input id="sendBtn" class="tj" type="button" value="送信" onclick="sendMail()">
                        {% if message %}
                            <div class="alert alert-warning" style="color:red">{{ message }}</div>
                        {% endif %}
                    </form>
                    <!--form>
                        {% csrf_token %}
                        <label class="txtin-box">
                            <input class="txtin" type="text" name="phonenumber" id="phonenumber" placeholder="请输入绑定的手机号"/>
                        </label>
                        <label class="txtin-box txtin-box-code">
                            <input class="txtin" type="text" id="snscode" placeholder="短信验证码"/>
    {#                            <a class="get-yzm" name="btnSendCode" id="btnSendCode" href="JavaScript:sendMessage();">获取验证码</a>#}
                            <input type="button" class="get-yzm" name="btnSendCode" id="btnSendCode" onclick="sendMessage()" value="获取验证码"></input>
                        </label>
                        {#                        <label class="txtin-box txtin-box-code">#}
                        {#                            <input class="txtin" type="text" name="" placeholder="验证码" />#}
                        {#                            <img class="yzm" src="" alt="" />#}
                        {#                        </label>#}
                        {% if message %}
                            <div class="alert alert-warning" style="color:red">{{ message }}</div>
                        {% endif %}
                        <input class="tj" type="button" value="发送" onclick="CheckCode()">
                        <!-- <input class="tj" type="submit" value="完&ensp;成" /> -->
    {#                    </form>#}
                </div>
                {#                <div class="tab-con">#}
                {#                    <form action="" method="">#}
                {#                        <label class="txtin-box">#}
                {#                            <input class="txtin" type="text" name="" placeholder="手机" />#}
                {#                        </label>#}
                {#                        <label class="txtin-box txtin-box-code">#}
                {#                            <input class="txtin" type="text" name="" placeholder="验证码" />#}
                {#                            <img class="yzm" src="" alt="" />#}
                {#                        </label>#}
                {#                        <input class="tj" type="submit" value="完&ensp;成" />#}
                {#                    </form>#}
                {#                </div>#}
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('.center-box').zTab({
                tabnav: '.box-hd-tabs',
                trigger: 'click'
            });
        });
    </script>

    <script type="text/javascript">
        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount;//当前剩余秒数
        function sendMessage() {
            //向后台发送处理数据
            $.ajax({
                type: "get", //用GET方式传输
                dataType: "json", //数据格式:JSON
                url: '/sendsnscode?mobile=' + $('#phonenumber').val(), //目标地址
                success: function (data) {
                    console.log(data);
                    if (data.code == true) {
                        curCount = count;
                        //设置button效果，开始计时
                        $("#btnSendCode").attr("disabled", "true");
                        $("#btnSendCode").val(curCount + "秒後に再取得");
                        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    } else {
                        alert(data.msg);
                    }
                }
            });
        }

        //timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj);//停止计时器
                $("#btnSendCode").removeAttr("disabled");//启用按钮
                $("#btnSendCode").val("検証コードを再送信する");
            } else {
                curCount--;
                $("#btnSendCode").val(curCount + "秒後に再取得");
            }
        }

        // 验证验证码
        function CheckCode() {
            var phonenumber = $('#phonenumber').val();
            var snscode = $('#snscode').val()

            if (phonenumber == null){
                alert('電話番号を入力してください');
            }else if (snscode == null){
                alert('検証コードを入力してください');
            }else{
                //向后台发送处理数据
            $.ajax({
                type: "get", //用GET方式传输
                dataType: "json", //数据格式:JSON
                url: '/checksnscode?mobile=' + phonenumber + '&code=' + snscode, //目标地址
                success: function (data) {
                    console.log(data);
                    if (data.code == true) {
                        alert('認証に成功しました!パスワード変更ページに移動しますので、パスワードをすぐに変更して覚えておいてください!');
                        window.location.href = '/change-pwd';
                    } else {
                        alert(data.msg);
                        window.clearInterval(InterValObj);//停止计时器
                        $("#btnSendCode").removeAttr("disabled");//启用按钮
                        $("#btnSendCode").val("検証コードを再送信する");
                    }
                }
            });
            }

        }

        // 发送邮件
        function sendMail() {
            var mail = $('#mail').val();

            if (mail == null){
                alert('メールアドレスを入力してください');
            } else {
                $("input[id='sendBtn']").attr("disabled", "disabled");
                $.ajax({
                type: "get", //用get方式传输
                dataType: "json", //数据格式:JSON
                url: '/send_pwd_mail?email=' + mail, //目标地址
                success: function (data) {
                    console.log(data);
                    $("input[id='sendBtn']").removeAttr("disabled");
                    if (data.code == true) {
                        alert('送信完了！メールをご確認ください。');
                    } else {
                        // window.location.href = 'uc/forgot-pwd-fail.html';
                        alert('送信失敗した！');
                    }
                },
                failed: function(){
                    $("input[id='sendBtn']").removeAttr("disabled");

                }
            });
            }
        }
    </script>
{% endblock %}

